import '../../scss/fp/jiatable.scss'
import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import { useNavigate } from 'react-router-dom';


function Jiatable(props) {
  
  var [ data , setData ] = useState();

  // 控制 loading 什么时候显示
  var [ loading , setLoading ] = useState(false);

  // 初始化表格 渲染对应的组件数据
  useEffect(() => {
    //-----🍌---🍌---🍌-----
    // console.log(props.callectData);
    setData(props.dataSource)
  })
  
  // 回调 传具体点击元素的 ID 给父组件
  const deleteFather = (record) => {
    //-----🍌---🍌---🍌-----

    props.shoppingcartClick(record) 
    // 控制 loading 什么时候显示 什么时候隐藏
    setLoading(true)
    setTimeout(() => {
        setLoading(false)
    }, 500);
  }

  // 判断两个函数是否存在，并执行某一个函数
  const trandTwo = (record) => {
     //-----🍈---🍈---🍈-----
     
     if( props.goTrand ) {
        props.goTrand()
      } else {
        props.callectData(record)
        props.showDrawer()
        // console.log('这个是编辑的事件');
     }

     if( props.callectData ) {
        props.callectData(record)
     } else {
        // console.log('这个是跳路由的事件');
        props.goTrand()
     }

  }



    const columns = [
        {
          title: '选择',
          dataIndex: 'shuxing',
          key: 'name',
          align: 'center' ,
          render: (text) =>  <input type="checkbox" />,
        },
        {
          title: props.top1,
          dataIndex: props.index1,
          key: 'name',
          align: 'center' ,
          render: (text) => <a>{text}</a>,
        },
        {
          title: props.top2,
          dataIndex: props.index2,
          key: 'age',
          align: 'center' ,
          responsive: ['md'],
        },
        {
          title: props.top3,
          dataIndex: props.index3,
          key: 'age',
          align: 'center' ,
          responsive: ['md'],
        //   render: (text) => <img src={ props.index3} alt="" width='30' height='23' />,
        },
        {
          title: props.top4,
          dataIndex: props.index4,
          key: 'age',
          align: 'center' ,
          responsive: ['md'],
        },
        {
          title: props.top5,
          dataIndex: props.index5,
          key: 'age',
          align: 'center' ,
          responsive: ['md'],
        },
        {
          title: props.top6,
          dataIndex: props.index6,
          key: 'age',
          align: 'center' ,
          responsive: ['md'],
        },
        {
          title: props.top7,
          dataIndex: props.index7,
          key: 'age',
          align: 'center' ,
          responsive: ['md'],
        },
        {
          title: props.top8,
          dataIndex: props.index8,
          key: 'age',
          align: 'center' ,
          responsive: ['md'],
        },
        {
          title: '操作',
          dataIndex: 'address',
          key: 'address',
          align: 'center',
          render: (_, record) => (
            <>
                <button className='btnn1' onClick={ () => { trandTwo(record) } }>{ props.btn1 }</button>
                <button className='btnn2' onClick={ () => { deleteFather(record) } }>{ props.btn2 }</button>
            </>
          ),
        },
      ];

    return (
        <div className='jiatable'>
                <Table 
                loading={ loading }
                dataSource={ data }
                pagination={{pageSize:8}}
                bordered={ true } 
                className='ta' 
                columns={columns} 
                scroll={{x:'max-content',y:750}}
                />
        </div>
    );
}

export default Jiatable;